---
type: integration
title: '@astrojs/preact'
description: "Apprenez à utiliser l'intégration de framework @astrojs/preact pour étendre la prise en charge des composants dans votre projet Astro."
sidebar:
  label: Preact
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/preact/'
category: renderer
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import Since from '~/components/Since.astro';

Cette **[intégration Astro][astro-integration]** permet le rendu et l'hydratation côté client pour vos composants [Preact](https://preactjs.com/).

## Pourquoi Preact ?

Preact est une bibliothèque qui vous permet de créer des composants d'interface utilisateur interactifs pour le web. Si vous souhaitez créer des fonctionnalités interactives sur votre site à l'aide de JavaScript, vous préférerez peut-être utiliser son format de composant plutôt que d'utiliser directement les API du navigateur.

Preact est également un excellent choix si vous avez déjà utilisé React. Preact fournit la même API que React, mais dans un format beaucoup plus petit de 3 Ko. Il prend même en charge le rendu de nombreux composants React en utilisant l'option de configuration `compat` (voir ci-dessous).

**Vous souhaitez en savoir plus sur Preact avant d'utiliser cette intégration ?**
Consultez ["Learn Preact" (Anglais)](https://preactjs.com/tutorial), un tutoriel interactif sur leur site web.

## Installation

Astro inclut une commande `astro add` pour automatiser l'installation des intégrations officielles. Si vous préférez, vous pouvez [installer les intégrations manuellement](#installation-manuelle) à la place.

Pour installer `@astrojs/preact`, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add preact
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add preact
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add preact
    ```
  </Fragment>
</PackageManagerTabs>

Si vous rencontrez des problèmes, [n'hésitez pas à nous les signaler sur GitHub](https://github.com/withastro/astro/issues) et essayez les étapes d'installation manuelle ci-dessous.

### Installation manuelle

Tout d'abord, installez le paquet `@astrojs/preact` :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/preact
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/preact
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/preact
    ```
  </Fragment>
</PackageManagerTabs>

La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement `Cannot find package 'preact'` (ou similaire) lorsque vous démarrez Astro, vous devez installer Preact :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install preact
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add preact
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add preact
    ```
  </Fragment>
</PackageManagerTabs>

Ensuite, appliquez l'intégration à votre fichier `astro.config.*` en utilisant la propriété `integrations` :

```js title="astro.config.mjs" ins={2} ins="preact()"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  // ...
  integrations: [preact()],
});
```

Et ajoutez le code suivant au fichier `tsconfig.json`.

```json title="tsconfig.json" ins={5-8}
{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}
```

## Utilisation

Pour utiliser votre premier composant Preact dans Astro, consultez notre [documentation sur les frameworks d'interface utilisateur][astro-ui-frameworks]. Vous y découvrirez :

* 📦 comment les composants du framework sont chargés,
* 💧 les options d'hydratation côté client, et
* 🤝 les possibilités de mélanger et d'imbriquer les frameworks.

Consultez également notre [documentation sur les intégrations Astro][astro-integration] pour en savoir plus sur les intégrations.

## Configuration

L'intégration Astro Preact gère le rendu des composants Preact et possède ses propres options. Modifiez ces options dans le fichier `astro.config.mjs` qui est l'endroit où se trouvent les paramètres d'intégration de votre projet.

Pour une utilisation basique, vous n'avez pas besoin de configurer l'intégration Preact.

### compat

<p>

**Type :** `boolean`<br />
<Since pkg="@astrojs/preact" v="0.3.0" />
</p>

Vous pouvez activer `preact/compat`, la couche de compatibilité de Preact pour le rendu des composants React sans avoir besoin d'installer ou de livrer les grandes bibliothèques de React aux navigateurs web de vos utilisateurs.

Pour ce faire, passez un objet à l'intégration Preact et mettez `compat: true`.

```js title="astro.config.mjs" "compat: true"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  integrations: [preact({ compat: true })],
});
```

Avec l'option `compat` activée, l'intégration Preact effectuera le rendu des composants React ainsi que des composants Preact dans votre projet et vous permettra également d'importer des composants React à l'intérieur des composants Preact. Pour en savoir plus, consultez ["Switching to Preact (from React)"](https://preactjs.com/guide/v10/switching-to-preact) sur le site web de Preact.

Lorsque vous importez des bibliothèques de composants React, afin de remplacer les dépendances `react` et `react-dom` par `preact/compat`, vous pouvez utiliser [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) pour le faire.

```json title="package.json"
{
  "overrides": {
    "react": "npm:@preact/compat@latest",
    "react-dom": "npm:@preact/compat@latest"
  }
}
```

Consultez la documentation [des remplacements `pnpm`](https://pnpm.io/package_json#pnpmoverrides) et celle des [résolutions `yarn`](https://yarnpkg.com/configuration/manifest#resolutions) pour leurs fonctionnalités de remplacement respectives.

:::note
Actuellement, l'option `compat` ne fonctionne que pour les bibliothèques React qui exportent du code en tant qu'ESM. Si une erreur survient lors de la compilation, essayez d'ajouter la bibliothèque à `vite.ssr.noExternal: ['la-bibliotheque-react']` dans votre fichier `astro.config.mjs`.
:::

### devtools

<p>

**Type :** `boolean`<br />
<Since pkg="@astrojs/preact" v="3.3.0" />
</p>

Vous pouvez activer les [outils de développement Preact](https://preactjs.github.io/preact-devtools/) durant le développement en passant un objet avec `devtools: true` à votre configuration d'intégration `preact()` :

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  // ...
  integrations: [preact({ devtools: true })],
});
```

## Options

### Combinaison de plusieurs frameworks JSX

Lorsque vous utilisez plusieurs frameworks JSX (React, Preact, Solid) dans le même projet, Astro doit déterminer quelles transformations spécifiques au framework JSX doivent être utilisées pour chacun de vos composants. Si vous n'avez ajouté qu'une seule intégration de framework JSX à votre projet, aucune configuration supplémentaire n'est nécessaire.

Utilisez les options de configuration `include` (obligatoire) et `exclude` (optionnelle) pour spécifier quels fichiers appartiennent à quel framework. Fournissez un tableau de fichiers et/ou de dossiers à `inclure` pour chaque framework que vous utilisez. Des caractères joker peuvent être utilisés pour inclure plusieurs chemins de fichiers.

Nous recommandons de placer les composants communs du framework dans le même dossier (par exemple `/composants/react/` et `/composants/solid/`) pour faciliter la spécification de vos inclusions, mais ce n'est pas obligatoire :

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // Permettre à de nombreux frameworks de prendre en charge tous les différents types de composants.
  // Aucun `include` n'est nécessaire si vous n'utilisez qu'un seul framework JSX !
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});
```

## Exemples

* L'exemple [Astro Preact](https://github.com/withastro/astro/tree/latest/examples/framework-preact) montre comment utiliser un composant Preact interactif dans un projet Astro.
* L'exemple [Astro Nanostores](https://github.com/withastro/astro/tree/latest/examples/with-nanostores) montre comment partager l'état entre différents composants — et même différents frameworks ! — dans un projet Astro.

[astro-integration]: /fr/guides/integrations-guide/

[astro-ui-frameworks]: /fr/guides/framework-components/#utilisation-des-composants-de-framework
